<template>
<div>
<!--  搜索框-->
  <div style="width: 100%;">
      <div class="inputDeep">
        <el-input v-model="text" style="width: 98%;margin-top: 2%;"></el-input><span class="el-icon-search" @click="search()"></span>
        <el-divider></el-divider>
      </div>
  </div>
<!--  搜索的内容-->
  <div style="width: 100%;height: 200px;">
<!--    头部-->
      <div>
        <el-tabs v-model="type" active-name="first" @tab-click="handleClick">
          <el-tab-pane label="全文检索" name="first"></el-tab-pane>
        </el-tabs>
      </div>
<!--    新闻主题-->
    <div>
      <div v-for="item in esObject">
        <router-link v-if="item.link === '1'" :to="{path:'/activityA/activityB',query:{id:item.id}}" style="text-decoration:none">
          <el-descriptions :content-style="'margin-top: -20px;height:25px;'" :colon="false" :column="1" :title="item.name">
            <el-descriptions-item :label="item.type"></el-descriptions-item>
            <el-descriptions-item ><p style="width: 1000px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.content}}</p></el-descriptions-item>
          </el-descriptions>
        </router-link>
        <router-link v-else :to="{path:'/articleA/articleB',query:{id:item.id}}" style="text-decoration:none">
          <el-descriptions :content-style="'margin-top: -20px;height:25px;'" :colon="false" :column="1" :title="item.name">
            <el-descriptions-item :label="item.type"></el-descriptions-item>
            <el-descriptions-item ><p style="width: 1000px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.content}}</p></el-descriptions-item>
          </el-descriptions>
        </router-link>
        <hr/>
      </div>

      <div class="block">
        <el-pagination
            layout="prev, pager, next"
            :page-size="data.size"
            @current-change="toPage"
            :total="data.totalElements">
        </el-pagination>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {esObjectSearch} from '@/api'
export default {
  name: "Search",
  data(){
    return {
      // activity:[],
      // article:[],
      // activitys:[],
      // articles:[],
      esObject:[],
      data:"",
      text:"",
      type:"",
      page:1,
      size:5,
      total:0,
    }
  },

  methods:{
    handleClick(tab, event) {
      this.search(this.type);
    },
    search(){
      esObjectSearch(this.text,1,5).then(result =>{
        this.data = result.data.data;
        this.esObject = this.data.content;
        console.log(this.data);
        console.log(this.esObject);
      });
    },

    toPage(page){
      console.log(page);
      this.page = page;
      esObjectSearch(this.text,page,5).then(result =>{
        this.data = result.data.data;
        this.esObject = this.data.content;
      })

    }
  },

  created() {
    esObjectSearch(null,1,5).then(result =>{
      this.data = result.data.data;
      this.esObject = this.data.content;
      console.log(this.data);
      console.log(this.esObject);
    });
  }
}
</script>

<style scoped>
.el-divider--horizontal {
  margin-top: 4px;
  border: 2px solid brown;
}
.el-divider {
  background: brown;
}
.inputDeep>>>.el-input__inner{
  border: 0;
}
/deep/.el-tabs__item {
  font-size: 18px !important;
}
</style>
